---
title: "Grid Auto Flow"
# description: "Utilities for controlling how elements in a grid are auto-placed."
description: "用于控制网格中元素如何自动放置的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/gridAutoFlow'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Usage -->
## 使用方法

<!-- Use the `grid-flow-{keyword}` utilities to control how the auto-placement algorithm works for a grid layout. -->
使用 `grid-flow-{keyword}` 功能类来控制网格布局的自动放置算法。

```html purple
<template preview class="bg-white p-8">
  <div class="grid grid-cols-3 grid-rows-3 grid-flow-col gap-4">
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">1</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">2</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">3</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">4</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">5</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">6</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">7</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">8</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">9</div>
  </div>
</template>

<div class="grid **grid-flow-col** grid-cols-3 grid-rows-3 gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the grid-auto-flow property at a specific breakpoint, add a `{screen}:` prefix to any existing grid-auto-flow utility. For example, use `md:grid-flow-col` to apply the `grid-flow-col` utility at only medium screen sizes and above. -->
要在特定的断点处控制 grid-auto-flow 属性，可以在任何现有的 grid-auto-flow 功能类前添加 `{screen}:` 前缀。例如，使用 `md:grid-flow-col` 来仅在中等尺寸及以上的屏幕应用 `grid-flow-col` 功能类。

```html
<div class="grid grid-flow-col **md:grid-flow-col** ...">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="gridAutoFlow" name="grid-auto-flow" />

### 禁止

<Disabling plugin="gridAutoFlow" name="grid-auto-flow" />
